<template>
  <div class="station-pending">
    <div class="ruifox-content-box">
      <div class="content-list">
        <SearchCmp :searchCmpArray="searchCmpArray" :searchForm="searchForm" @onSubmit="handleSearch" style="margin-bottom: 10px" />
        <RuifoxTable v-model:tableData="tableData" v-model:fieldList="fieldList" :loading="tableLoading" :default-index="true">
          <template #options="{ element }">
            <div class="table-td-option">
              <el-button v-permission="['flow:task:completed:process']" type="primary" size="small" link @click="handleAuditProgress(element)">审核进度</el-button>
            </div>
          </template>
          <template #state="{ element }">
            <el-tag :type="stateMapping[element.state].type">{{ stateMapping[element.state].label }}</el-tag>
          </template>
          <template #create_time="{ element }">
            {{ dayjs(element.create_time).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </RuifoxTable>
        <PaginationViewSimple :total="queryData.total" :pageSize="queryData.pageSize" :currentPage="queryData.currentPage" @changeSize="handleSizeChange" @currentChange="handleCurrentChange" />
      </div>
    </div>
    <!-- 审核进度 -->
    <el-dialog v-model="showAuditProgress" title="审核进度" width="600px" class="process-dialog">
      <AuditProgress v-if="showAuditProgress" :id="processInstanceId" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useStore } from 'vuex'
import { getAssignedToUserPage } from '@/api/station'
import AuditProgress from '@/views/flow/task/components/AuditProgress'
import dayjs from 'dayjs'

const store = useStore()
const stateMapping = computed(() => store.state.flow.stationStateMapping)
// 表格数据
const fieldList = ref([
  { title: '标题', width: '', name: 'title', showTextTip: true },
  { title: '发布者', width: '', name: 'publish_user' },
  { title: '发布时间', width: '', name: 'create_time' },
  { title: '来源栏目', width: '', name: 'category_name' },
  { title: '状态', width: '', name: 'state' },
  { title: '操作', width: '150', name: 'options', fixed: 'right' }
])
const tableLoading = ref(false)
const tableData = ref([])
const defaultQueryData = reactive({
  currentPage: 1,
  pageSize: 30
})
const queryData = ref(Object.assign({}, defaultQueryData))
const handleGetTableData = async () => {
  tableLoading.value = true
  const res = await getAssignedToUserPage(queryData.value)
  if (res.code === 20000) {
    tableData.value = res.data.list
    queryData.value.total = res.data.total
  }
  tableLoading.value = false
}
handleGetTableData()
// 条件查询
const searchForm = ref({})
const searchCmpArray = ref([
  { label: '标题', key: 'name', formType: 'input' },
  { label: '内容', key: 'content', formType: 'input' }
])
const handleSearch = () => {
  queryData.value = { ...queryData.value, ...searchForm.value }
  handleGetTableData()
}
// 审核进度
const showAuditProgress = ref(false)
const processInstanceId = ref('')
const handleAuditProgress = async data => {
  showAuditProgress.value = true
  processInstanceId.value = data.process_instance_id
}
const handleSizeChange = size => {
  queryData.value.pageSize = size
  handleGetTableData()
}
const handleCurrentChange = page => {
  queryData.value.currentPage = page
  handleGetTableData()
}
</script>

<style lang="scss" scoped></style>